<template>
	<view style="width: 100%; height: 80vh; background:#f8f8f8 ; padding-top: 20vh;">

		<view class="" style=" border-radius: 20rpx; width: 90%; margin: auto;  background: #fff;">
			<!-- 登录 -->
			<view class="" v-if="switchValue == 0">
				<view class="" style="text-align: center; padding-top: 50rpx;">
					<text style="font-size: 40rpx; font-weight: 600;">登录</text>
				</view>

<!--				<view class="" style="display: flex; width: 90%; margin:40rpx auto; border-bottom: 1px solid #ccc;">-->
<!--					<text style="width: 200rpx;">手机号：</text>-->
<!--					<input v-model="nameText" class="uni-input" placeholder="请输入手机号" />-->
<!--					  &lt;!&ndash; <button>{{ countdown > 0 ? `${countdown} 秒后重新发送` : '发送验证码' }}</button> &ndash;&gt;-->
<!--					<p  @click="sendCode" :disabled="countdown > 0" style="width: 300rpx; font-size: 30rpx; color: #0274d5;">{{ countdown > 0 ? `${countdown} 秒后重新发送` : '发送验证码' }}</p>-->
<!--				</view>-->
<!--				<view class="" style="display: flex; width: 90%; margin:20rpx auto; border-bottom: 1px solid #ccc;">-->
<!--					<text>验证码：</text>-->
<!--					<input v-model="passwordText" class="uni-input" focus placeholder="请输入验证码" />-->
<!--				</view>-->

        <view style="margin-top: 32px">
          <input v-model="phoneValue" @input="inputPhone()" style="background: #f6f6f4;padding: 12px;height: 45px;border-radius: 30px;width: 80%;margin: auto" placeholder="请输入您的手机号"></input>
        </view>
        <view v-if="codeType==2" style="margin-top: 12px">
          <input v-model="codeValue" style="background: #f6f6f4;padding: 12px;height: 45px;border-radius: 30px;width: 80%;margin: auto" placeholder="请输入验证码"></input>
        </view>
        <view v-if="codeType==2" style="margin-top: 12px">
          <input v-model="inviteValue" style="background: #f6f6f4;padding: 12px;height: 45px;border-radius: 30px;width: 80%;margin: auto" placeholder="请输入邀请码"></input>
        </view>
				<view v-if="codeType==0" class=""  style="opacity: 0.5; width: 100%;display: flex; justify-content: center;align-items: center;padding: 30rpx 0;">
					<view  style="width: 80%; text-align: center;  height: 80rpx;
			      background: linear-gradient(to right, #fc9763, #f76927);line-height: 80rpx;
			      border-radius: 50rpx; color: #fff; font-weight: 500;font-size: 14px">
            获取验证码
          </view>
        </view>
        <view v-if="codeType==1" class="" @click="sendCode" style="width: 100%;display: flex; justify-content: center;align-items: center;padding: 30rpx 0;">
          <view  style="width: 80%; text-align: center;  height: 80rpx;
			      background: linear-gradient(to right, #fc9763, #f76927);line-height: 80rpx;
			      border-radius: 50rpx; color: #fff; font-weight: 500;font-size: 14px">
            获取验证码
          </view>
        </view>
        <view v-if="codeType==2" class="" @click="userLogin()" style="width: 100%;display: flex; justify-content: center;align-items: center;padding: 30rpx 0;">
          <view  style="width: 80%; text-align: center;  height: 80rpx;
			      background: linear-gradient(to right, #fc9763, #f76927);line-height: 80rpx;
			      border-radius: 50rpx; color: #fff; font-weight: 500;font-size: 14px">
            登录
          </view>
        </view>
        <view style="font-size: 12px;color: #999798;width: 80%;margin: auto">
<!--          已阅读并同意<test>用户协议</test>和<text>隐私政策</text>-->
        </view>
			</view>


			<!-- 注册 -->
			<view class="" v-if="switchValue == 1">
				<view class="" style="text-align: center; padding-top: 50rpx;">
					<text style="font-size: 40rpx; font-weight: 600;">注册</text>
				</view>
				<view class="" style="display: flex; width: 80%; margin:40rpx auto; border-bottom: 1px solid #ccc;">
					<text>昵称：</text>
					<input v-model="nameValue" class="uni-input" maxlength="10" placeholder="最大输入长度为10" />
				</view>
				<view class="" style="display: flex; width: 80%; margin:40rpx auto; border-bottom: 1px solid #ccc;">
					<text>手机号：</text>
					<input v-model="phoneValue" maxlength="11" class="uni-input" focus placeholder="请输入手机号" />
				</view>
				<view class="" style="display: flex; width: 80%; margin:40rpx auto; border-bottom: 1px solid #ccc;">
					<text>密码：</text>
					<input v-model="passwordValue" class="uni-input" focus placeholder="请输入密码" />
				</view>
				<view class="" style="display: flex; width: 80%; margin:40rpx auto; border-bottom: 1px solid #ccc;">
					<text>性别：</text>
					<view class="" style="display: flex; justify-content: space-between; width: 80%;">
						<text>{{name}}</text>
						<switch @change="chswitch" color="#fb98a4" style="transform:scale(0.7)" />
					</view>

				</view>
				<!-- <view class="" @click="toRegister"
					style="width: 100%;display: flex; justify-content: center; align-items: center;padding: 30rpx 0 ;">
					<p style=" text-align: center; width: 500rpx; height: 80rpx;
				background: #fa6725;line-height: 80rpx; border-radius: 50rpx; color: #fff; font-weight: 500;"> 注册</p>
				</view> -->

			</view>
		</view>
		<!-- <view @click="toswitch" class="" v-if="switchValue == 0"
			style="margin: 50rpx 30px; width: 230rpx; color: #0274d5; border-bottom: 1px solid #0274d5;">
			<text> 没有账号去注册</text>

		</view>
		<view v-if="switchValue == 1" @click="toPassword" class=""
			style="margin: 50rpx 30px; width: 230rpx; color: #0274d5; border-bottom: 1px solid #0274d5;">
			<text>已有账号去登录</text>
		</view> -->
		<view class="" style="text-align: center;margin-top: 40rpx; ">
			<span style=" color: #0274d5;" @click="toAgreement(2)">用户协议</span> 和 <span style=" color: #0274d5;"
				@click="toAgreement(1)">用户隐私协议</span>
		</view>
	</view>

</template>

<script>
	import {
		postUserLogin,
		postUserRegister,
		postSmsSend,
	} from '@/http/api.js';
	export default {
		data() {
			return {
				 countdown: 0,
				name: '男',
				gender: '1', //选择性别
				passwordValue: '', //注册密码
				phoneValue: '', //注册手机号
				nameValue: '', //注册昵称
				nameText: '', //登录昵称
				passwordText: '', //登录密码
				switchValue: 0, //切换为注册
        codeType: 0,
        codeValue:'',//验证码
        inviteValue:'' //邀请码
			};
		},
		onLoad() {



		},

		methods: {


      inputPhone(){

        if (this.phoneValue.length===11){

          this.codeType = 1

        }else {
          this.codeType = 0
        }

      },

			toAgreement(i) {
				uni.navigateTo({
					url: 'agreement/agreement?id=' + i
				})
			},
			// 登录接口
			userLogin() {
				const systemInfo = uni.getSystemInfoSync();
				console.log(systemInfo.deviceId,"uuid1111111111111");
        // "uuid":systemInfo.deviceId
				let data = {
					"mobile": this.phoneValue,
					"captcha": this.codeValue,
					"invite_rwm": this.inviteValue,

				}
				postUserLogin(data).then((res) => {
					console.log(res.data);
					if (res.code == 0) {

						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000,
							mask: true
						});
						if (this.nameText == '') {
							uni.showToast({
								title: '请填写手机号',
								icon: 'none',
								duration: 2000,
								mask: true
							});
						}
						if (this.passwordText == '') {
							uni.showToast({
								title: '请填写验证码',
								icon: 'none',
								duration: 2000,
								mask: true
							});
						}
					} else if (res.code == 1) {
            console.log('登录',res)
						uni.setStorageSync('userInfo', res.data.userinfo);
            uni.setStorageSync('Token', res.data.userinfo.token);
						console.log(res.data.data, "用户信息");
						uni.showToast({
							title: res.data.msg,
							icon: 'none',
							duration: 2000,
							mask: true
						});
						uni.switchTab({
							url: '/pages/home/index'
						});
					}
				})
			},
			// 登录
			toLogon() {
				this.userLogin()
			},
			// 短信登录接口

			// 注册
			toRegister() {
				this.userRegister()
			},
			// 注册接口
			userRegister() {
				let data = {
					"username": this.nameValue,
					"password": this.passwordValue,
					"mobile": this.phoneValue,
					"gender": this.gender
				}
				postUserRegister(data).then((res) => {

					uni.showToast({
						title: res[1].data.msg,
						icon: 'none', // 提示框的图标，可选值：'success', 'loading', 'none'
						duration: 2000, // 提示框的显示时间，单位为毫秒，默认为1500ms
						mask: true // 是否显示透明蒙层，防止触摸穿透
					});
					if (this.passwordValue == '') {
						uni.showToast({
							title: '请填写密码',
							icon: 'none',
							duration: 2000,
							mask: true
						});
					}
					if (this.phoneValue == '') {
						uni.showToast({
							title: '请填写手机号',
							icon: 'none',
							duration: 2000,
							mask: true
						});
					}
					if (this.nameValue == '') {
						uni.showToast({
							title: '请填写昵称',
							icon: 'none', // 提示框的图标，可选值：'success', 'loading', 'none'
							duration: 2000, // 提示框的显示时间，单位为毫秒，默认为1500ms
							mask: true // 是否显示透明蒙层，防止触摸穿透
						});
					}

					if (res[1].data.code == 1) {
						this.switchValue = 0
					}
					console.log(res[1].data, "注册接口");
				})
			},
			chswitch(e) {
				console.log('switch 发生 change 事件，携带值为', e.detail.value)
				if (e.detail.value == false) {
					this.name = '男'
					this.gender = '1'
				} else {
					this.name = '女'
					this.gender = '2'
				}
			},
			// 切换为注册
			toswitch() {
				this.switchValue = 1
			},
			// 切换为登录
			toPassword() {
				this.switchValue = 0
			},
			// 获取验证码
			 sendCode() {

			      if (this.countdown > 0) {
			        return;
			      }
			      // if (!this.validatePhone()) {
					  // console.log( "手机号验证失败，给出提示");
			      //   // 手机号验证失败，给出提示
			      //   return;
			      // }
			      // 调用发送验证码接口
				  let data={
					  "mobile": this.phoneValue,
					  // "event":'register'
					  // 登录
					  "event":'mobilelogin'

				  }
				  postSmsSend(data).then((res)=>{
            this.codeType = 2
					  console.log(res[1].data,"发送验证码");

				  })

			      // 发送成功后开始倒计时
			      this.startCountdown();
				   console.log(123);
			    },
			    startCountdown() {
			      this.countdown = 60; // 设置倒计时为60秒
			      const timer = setInterval(() => {
			        if (this.countdown > 0) {
			          this.countdown--;
			        } else {
			          clearInterval(timer);
			        }
			      }, 1000);
			    },
				validatePhone() {
				      // 手机号验证逻辑
				      // 例如：使用正则表达式验证手机号格式是否正确
				      return /^1[0-9]{10}$/.test(this.nameText);
				    },
				    validateCode() {
				      // 验证码验证逻辑
				      // 例如：判断验证码是否为6位数字
				      return /^\d{6}$/.test(this.passwordText);
				    },
	}}
</script>

<style lang="scss">

</style>
